<template>
	<view style="background-color:#353866;">
		<view class="canvas-in">
			<canvas v-if="heightIn > 0" 
			:style="{
				width:widthIn+'px', 
				height:heightIn+'px', 
				opacity:0
			}" 
			canvas-id="graceCanvas" class="grace-canvas"></canvas>
		</view>
		<view class="grace-canvas-img" v-if="imgSrc != null">
			<image :src="imgSrc" mode="widthFix" style="width:750rpx" @longpress="longpress"></image>
		</view>
	</view>
</template>
<script>
export default {
	data(){
		return {
			width    : 750,   // 画布宽度，单位 rpx
			height   : 1380,  // 画布高度
			widthIn  : 300,   // 自动计算转换为 px
			heightIn : 0,  //  自动计算转换为 px
			bgColor  : '#353866', // 背景颜色
			bgImg    : '',//https://cmsuse.oss-cn-beijing.aliyuncs.com/g5/banner1.jpg
			bgImg2    : '',//https://cmsuse.oss-cn-beijing.aliyuncs.com/g5/banner1.jpg
			imgSrc   : null,
			multiple : 1 ,// 将画布放大 2.0 - 2.9 倍（支持小数，过大app端会出现无法渲染的问题），保存的图片更清晰
			user:{}
		}
	},
	onLoad : function () {
		 this.bgImg=uni.common.imgServer+'/top.jpg'
		  this.bgImg2=uni.common.imgServer+'/footer.jpg'
		uni.showLoading({title:'请耐心等待...'});
		// 画布初始化
		this.context = uni.createCanvasContext('graceCanvas');
		this.initSize();
		
		uni.common.post(
			uni.common.apiServer + 'my',
			{
				type: 'get_my_info_haibao',
			},
			false,
			res => {
				if (res.code == 1) {
					this.user=res.data
					setTimeout(()=>{this.draw();}, 1000);
				} else {
					uni.showToast({
						icon: 'none',
						title: '生成海报错误'
					});
				}
			},
			e => {
				console.log(e);
			}
		);
	},
	methods:{
		// 画布初始化
		initSize : function () {
			// let wo=uni.getSystemInfoSync()
			// console.log(this.height,111);
			// console.log(wo.screenHeight);
			
			this.widthIn  = uni.upx2px(this.width)  * this.multiple;
			this.heightIn = uni.upx2px(this.height) * this.multiple;
			console.log(this.widthIn, this.heightIn);
		},
		// 海报绘制代码
		draw : function(){
			// 步骤 01. 绘制背景颜色
			this.step01();
			// 步骤 02. 绘制背景图片（如果需要，条件结构）
			if(this.bgImg != ''){
				this.drawBGIMG(this.bgImg,this.bgImg2, ()=>{
					// 步骤 03
					this.step03();
				});
			}else{
				this.step03();
			}
		},
		// 步骤 01 : 绘制背景颜色
		step01 : function () {
			this.context.setFillStyle(this.bgColor);
			this.context.fillRect(0,0,this.widthIn, this.heightIn);
		},
		// 步骤 03 : 
		// 3.1 绘制标题 [ 居中对应 x = 画布的一半 ]
		// 3.2 绘制验证码
		step03 : function () {
			// 3.1 绘制标题 [ 居中对应 x = 画布的一半 ]
			this.drawText(
				'商城提醒您，长按图片保存 ~ ', 
				this.widthIn / 2, (this.heightIn/3 + 50 * this.multiple), 
				'#FFFFFF', 
				16  * this.multiple, 
				'center'
			);
			// 3.2 绘制二维码
			uni.downloadFile({
				// 请使用自己的后端来实现二维码的生成
				// 如 : php 的 qrcode, 此处换成自己的二维码图片 api 地址
			    url: uni.common.nServer+this.user.erweima,
			    success: (res) => {
			        if (res.statusCode === 200) {
						// 绘制二维码
						// x = (画布宽度 - 图片宽度 ) / 2
						var qrCodeWidth = 200 * this.multiple;
						var x = (this.widthIn - qrCodeWidth) / 2;
						this.context.drawImage(res.tempFilePath,x, 300 * this.multiple,qrCodeWidth,qrCodeWidth);
						// 3.3 二维码下面的小字描述 
						this.drawText('邀请码：'+this.user.user_no, this.widthIn / 2, 550 * this.multiple, '#FFFFFF', 18 * this.multiple, 'center');
						// 在最后一步执行 drawIt 完整最终的绘制
						this.drawIt();
			        }
			    },
				fail:function(e){console.log(e);}
			});
		},
		// 绘制文本, 参数 : 文本内容,x,y,颜色,文本大小,横向对齐方式
		drawText:function(content, x, y, color, size, align){
			this.context.setFontSize(size);
			this.context.setFillStyle(color);
			this.context.setTextAlign(align);
			this.context.fillText(content,x,y);
		},
		// 最终绘制函数
		drawIt : function(){
			this.context.draw(true, ()=>{
				uni.canvasToTempFilePath({
				  x: 0,
				  y: 0,
				  width: this.widthIn,
				  height: this.heightIn,
				  destWidth: this.widthIn,
				  destHeight: this.heightIn,
				  canvasId: 'graceCanvas',
				  success:(res)=>{
				    // 在H5平台下，tempFilePath 为 base64
				    console.log(res)
					this.imgSrc = res.tempFilePath;
					uni.hideLoading();
				  } 
				});
			});
		},
		// 绘制图片,参数 : 图片地址, 绘制完成后执行的回调函数
		drawBGIMG:function (img,img2, callback){
			uni.downloadFile({
			    url: img,
			    success: (res) => {
			        if (res.statusCode == 200) {
						// 绘制
						uni.getImageInfo({
							src:res.tempFilePath,
							success:(res2)=>{
								uni.downloadFile({
								    url: img2,
								    success: (res1) => {
								        if (res1.statusCode == 200) {
											// 绘制
											uni.getImageInfo({
												src:res1.tempFilePath,
												success:(res3)=>{
													var bgImgHeight = (this.widthIn/res3.width) * res3.height;
													this.context.drawImage(res.tempFilePath,0,0,this.widthIn, bgImgHeight);
													let wo=uni.getSystemInfoSync()

													this.context.drawImage(res1.tempFilePath,0,wo.screenHeight-300,this.widthIn, bgImgHeight);
													callback();
												}
											});
								        }
								    }
								});
							}
						});
			        }
			    }
			});
		},
		// 长按事件
		longpress : function () {
			uni.saveImageToPhotosAlbum({
				filePath: this.imgSrc,
				success:()=>{
					console.log('save success');
					uni.showToast({
						title:"图片已经保存到您的相册~"
					})
				}
			});
		}
	}
}
</script>
<style>
page{background-color:#353866;}
.canvas-in{width:750rpx; overflow:hidden; position:absolute; z-index:1; left:0; top:-5000px;}
.grace-canvas-img{font-size:0; width:750rpx;}
</style>